<template>
  <div class="home">
    <headerMobel v-if="screenWidth <= 1024 || isMobile()" />
    <headerTop v-if="screenWidth > 1024 && !isMobile()" />
    <bannerList :bannerImg="bannerImgList" v-if="screenWidth > 1024  && !isMobile()" />
    <bannerMobel :bannerImg="bannerImgList" v-if="screenWidth <= 1024  || isMobile()" />
    <!-- <headerSmall @headerChange="headerChange" v-if="screenWidth > 1024" /> -->
    <div class="out-box" v-if="screenWidth > 1024  && !isMobile()">
      <div class="content-ab">
        <scroll-handle>
          <div class="text-part">
            <div class="left-font">
              Enhance The Brand With<br />
              Greater Warmth And Deepen<br />
              The Business Engagement.
            </div>
            <div class="right-font">
              <div class="big-font">
                让品牌更有温度<br />
                让生意更有深度
              </div>
              <div class="lit-fontcn pad-top">
                我们从商业角度出发，为客户打造既有创意又能产生实际效果的品牌解决方案。
              </div>
            </div>
          </div>
        </scroll-handle>
        <div class="img-list" v-if="screenWidth > 1024  && !isMobile()">
          <brandImages
            v-for="(item, index) in brandData"
            :key="index"
            :brandImg="baseApi + item.coverImg"
            :title="item.title"
            :caseTypeStr="item.caseTypeStr"
            @click="toDetails(item.id)"
          />
        </div>
        <div class="img-list" v-if="screenWidth <= 1024  || isMobile()">
          <brandImageMobel
            v-for="(item, index) in brandData"
            :key="index"
            :brandImg="baseApi + item.coverImg"
            :title="item.title"
            :caseTypeStr="item.caseTypeStr"
            @click="toDetails(item.id)"
          />
        </div>
        <scroll-handle>
          <div class="text-part-logo">
            <div class="left-font">
              <el-image class="imgstyle" :src="redLogo" fit="cover" />
            </div>
            <div class="right-font">
              <div class="lit-fontcn-logo">
                我们是 Light 里特创意，专注于创意设计与营销结果。
                通过落地性的品牌策略，创造实际的商业价值。
                用更精准的市场洞察，打造更高效的品牌传达，让设计不仅是视觉表现，更是与消费者建立深层情感连接。
                让创意成为生意增长的核心驱动力，为企业创造持久而独特的价值。
              </div>
              <div class="mid-font-logo">
                让创意更落地，<br />
                让生意更容易！
              </div>
            </div>
          </div>
        </scroll-handle>
        <scroll-handle>
          <div class="text-part-clien">
            <div class="left-font lage-font">#CLIENTS</div>
            <div class="right-font">
              <div class="mid-font-clien pont-font">服务客户</div>
              <div class="lit-fontcn-clien">
                在里特创意，我们始终坚信，客户的成功就是我们的成功。我们首先注重与客户的沟通，理解客户的核心需求，确保我们的创意与策略能准确打动目标受众，为客户提供量身定制的解决方案。从设计到实施，为客户提供全方位的支持，我们始终保持高效，确保每个细节都精准，与客户共同应对市场的变化与挑战。
              </div>
            </div>
          </div>
        </scroll-handle>
        <scroll-handle>
          <div class="brand-list">
            <el-image class="imgbrand" :src="baseApi + brandlist" fit="cover" />
          </div>
        </scroll-handle>
      </div>
    </div>
    <div class="out-box-mobel"  v-if="screenWidth <= 1024  || isMobile()" >
      <div class="content-ab-mobel">
        <scroll-handle>
          <div class="text-part-mobel">
            <div class="left-font-mobel">
              Enhance The Brand With<br />
              Greater Warmth And Deepen<br />
              The Business Engagement.
            </div>
            <div class="right-font-mobel">
              <div class="big-font-mobel">
                让品牌更有温度<br />
                让生意更有深度
              </div>
              <div class="lit-fontcn-mobel pad-top-mobel">
                我们从商业角度出发，为客户打造既有创意又能产生实际效果的品牌解决方案。
              </div>
            </div>
          </div>
        </scroll-handle>

        <div class="img-list-mobel" v-if="screenWidth <= 1024  || isMobile()">
          <brandImageMobel
            v-for="(item, index) in brandData"
            :key="index"
            :brandImg="baseApi + item.coverImg"
            :title="item.title"
            :caseTypeStr="item.caseTypeStr"
            @click="toDetails(item.id)"
          />
        </div>
        <scroll-handle>
          <div class="text-part-logo-mobel">
            <div class="left-font-mobel">
              <el-image class="imgstyle-mobel" :src="redLogo" fit="cover" />
            </div>
            <div class="right-font-mobel">
              <div class="lit-fontcn-logo-mobel">
                我们是 Light 里特创意，专注于创意设计与营销结果。
                通过落地性的品牌策略，创造实际的商业价值。
                用更精准的市场洞察，打造更高效的品牌传达，让设计不仅是视觉表现，更是与消费者建立深层情感连接。
                让创意成为生意增长的核心驱动力，为企业创造持久而独特的价值。
              </div>
              <div class="mid-font-logo-mobel">
                让创意更落地，<br />
                让生意更容易！
              </div>
            </div>
          </div>
        </scroll-handle>
        <scroll-handle>
          <div class="text-part-clien-mobel">
            <div class="left-font-mobel lage-font-mobel">#CLIENTS</div>
            <div class="right-font-mobel">
              <div class="mid-font-clien-mobel pont-font-mobel">服务客户</div>
              <div class="lit-fontcn-clien-mobel">
                在里特创意，我们始终坚信，客户的成功就是我们的成功。我们首先注重与客户的沟通，理解客户的核心需求，确保我们的创意与策略能准确打动目标受众，为客户提供量身定制的解决方案。从设计到实施，为客户提供全方位的支持，我们始终保持高效，确保每个细节都精准，与客户共同应对市场的变化与挑战。
              </div>
            </div>
          </div>
        </scroll-handle>
        <scroll-handle>
          <div class="brand-list-mobel">
            <el-image class="imgbrand-mobel" :src="baseApi + brandlist" fit="cover" />
          </div>
        </scroll-handle>
      </div>
    </div>
    <footer-page v-if="screenWidth > 1024  && !isMobile()"></footer-page>
    <footer-page-mobel v-if="screenWidth <= 1024 || isMobile()"></footer-page-mobel>
  </div>
</template>

<script>
import { caseDesignList, picConfigList } from "@/api/defapi";

import footerPageMobel from "@/components/footerPageMobel.vue";
import brandImageMobel from "@/components/brandImageMobel.vue";
import bannerMobel from "@/components/bannerMobel.vue";
import scrollHandle from "@/components/scrollHandle.vue";
import redLogo from "@/assets/imgs/logored.png";
import brandlist from "@/assets/imgs/brandlist.jpg";
import changeImages from "@/components/changeImages.vue";
// import HelloWorld from '@/components/HelloWorld.vue'
import brandImages from "@/components/brandImages.vue";
import headerTop from "@/components/headerTop.vue";
import headerMobel from "@/components/headerMobel.vue";
import headerSmall from "@/components/headerSmall.vue";
import bannerList from "@/components/bannerList.vue";
import footerPage from "@/components/footerPage.vue";
export default {
  name: "HomeView",
  components: {
    // HelloWorld,
    bannerMobel,
    headerTop,
    headerSmall,
    bannerList,
    changeImages,
    footerPage,
    brandImages,
    scrollHandle,
    headerMobel,
    brandImageMobel,
    footerPageMobel,
  },
  data() {
    return {
      redLogo: redLogo,
      brandlist: brandlist,
      topHanderView: true,
      screenWidth: window.innerWidth,
      brandData: "",
      bannerImgList: "",
      baseApi: process.env.VUE_APP_IMGADDRESS,
    };
  },
  created() {},
  mounted() {
    caseDesignList().then((res) => {
      this.brandData = res.data;
    });
    picConfigList({ imgType: 1 }).then((res) => {
      this.bannerImgList = res.data;
    });
    picConfigList({ imgType: 2 }).then((res) => {
      // this.bannerImgList = res.data
      this.brandlist = res.data.length ? res.data[0].imgUrl : "";
    });
    window.addEventListener("resize", this.getScreenSise);
  },
  methods: {
    toDetails(id) {
      this.$router.push({
        path: "/details",
        query: {
          id,
        },
      });
    },
    getScreenSise() {
      this.screenWidth = window.innerWidth;
    },

    isMobile() {
      const userAgentInfo = navigator.userAgent;
      console.log(userAgentInfo)
      const mobileAgents = [
        "Android",
        "iPhone",
        "SymbianOS",
        "Windows Phone",
        "iPad",
        "iPod",
      ];
      const mobileFlag = mobileAgents.some((mobileAgent) => {
        return userAgentInfo.indexOf(mobileAgent) > 0;
      });

      let isPro = /Version\/.* Safari/.test(userAgentInfo); // 检查是否有Safari标识，通常iPad Pro才会有

      // 更精确的检测方式，检查屏幕尺寸或像素比（PPI）
      let pixelRatio = window.devicePixelRatio;
      console.log(pixelRatio)
      let isHighResolution =  pixelRatio >= 2; // iPad Pro的大约分辨率为1024x1366，像素比为2或3
      console.log(navigator)
      let isipadpro = isPro && isHighResolution;
      console.log(isipadpro, isPro, isHighResolution);
      let isiPad = (navigator.userAgent.match(/(iPad)/) || (navigator.userAgent.match(/(Macintosh)/) && navigator.maxTouchPoints >= 1));
      return mobileFlag || isiPad;
    },
    headerChange(val) {
      this.topHanderView = !val;
    },
  },
};
</script>
<style lang="scss" scoped>
/* 针对PC端 */
@media screen and (min-width: 1025px) {
  .out-box {
    background-color: #fff;
    width: 100%;
  }

  .content-ab {
    padding: 0 100px;
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
  }

  .img-list {
    width: 100%;
    // padding: 0 100px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 40px;
  }

  .text-part {
    width: 100%;
    height: 700px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding-top: 200px;
    font-family: "BebasFont";
  }

  .text-part-clien {
    width: 100%;
    // height: 700px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 300px 0 100px;
    font-family: "BebasFont";
  }

  .text-part-logo {
    width: 100%;
    // height: 550px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding-top: 300px;
    font-family: "BebasFont";
  }

  .left-font {
    font-size: 32px;
    text-align: left;
    text-transform: uppercase;
    font-family: "BebasFontEnL";
  }

  .big-font {
    font-size: 66px;
    font-family: "BebasFontB";
    line-height: 80px;
    // font-weight: 500;
  }

  .mid-font-logo {
    font-size: 66px;
    font-family: "BebasFontB";
    line-height: 80px;
    padding-top: 60px;
  }

  .mid-font-clien {
    font-family: "BebasFontB";
    font-size: 50px;
    display: flex;
    align-items: center;
    // font-weight: 500;
    margin-top: 70px;
  }

  .lit-fontcn {
    font-size: 30px;
    line-height: 40px;
    font-family: "BebasFont";
  }

  .lit-fontcn-logo {
    font-size: 30px;
    line-height: 44px;
    text-align: justify;
  }

  .lit-fontcn-clien {
    font-size: 30px;
    line-height: 44px;
    padding-top: 143px;
    text-align: left;
    text-align: justify;
  }

  .pad-top {
    padding-top: 70px;
  }

  .imgstyle {
    width: 380px;
    // height: 255px;
  }

  .lage-font {
    font-size: 150px;
    color: #000;
    font-family: "BebasFontEnB";
  }

  .pont-font {
    position: relative;
    padding-left: 40px;
  }

  .pont-font::after {
    content: "";
    width: 100%;
    height: 1px;
    background-color: #000;
    position: absolute;
    bottom: -8px;
    left: 0px;
  }

  .pont-font::before {
    content: "";
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #ed112c;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
  }
  .brand-list {
    width: 100%;
    height: auto;
    padding-bottom: 200px;
  }
}

/* 针对移动端 */

  .content-ab-mobel {
    background-color: #fff;
    padding: 0 3.2rem;
    width: 100%;
  }

  .img-list-mobel {
    width: 100%;
    // padding: 0 100px;
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 5.6rem;
  }

  .text-part-mobel {
    width: 100%;
    // height: 400px;
    display: grid;
    grid-template-columns: 1fr;
    padding: 10rem 0 10rem;
    font-family: "BebasFont";
  }

  .text-part-clien-mobel {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    padding: 25rem 0 10rem;
    font-family: "BebasFont";
  }

  .text-part-logo-mobel {
    width: 100%;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    padding-top: 8rem;
    font-family: "BebasFont";
  }

  .left-font-mobel {
    font-size: 2.2rem;
    text-align: left;
    text-transform: uppercase;
    font-family: "BebasFontEn";
  }

  .big-font-mobel {
    padding-top: 10rem;
    font-size: 6rem;
    font-family: "BebasFontB";
    text-align: left;
  }

  .lit-fontcn-mobel {
    font-size: 2.8rem;
    text-align: right;
  }

  .pad-top-mobel {
    padding-top: 2.8rem;
    text-align: right;
    text-align: justify;
    line-height: 4.1rem;
  }

  .lit-fontcn-logo-mobel {
    font-size: 2.8rem;
    text-align: left;
    text-align: justify;
    line-height: 4.1rem;
  }

  .imgstyle-mobel {
    width: 30rem;
    padding-bottom: 5.8rem;
    // height: 255px;
  }

  .mid-font-logo-mobel {
    font-size: 6rem;
    font-weight: 500;
    padding-top: 7rem;
  }

  .mid-font-clien-mobel {
    margin-top: 5rem;
    font-size: 4rem;
    font-weight: 500;
    font-family: "BebasFontB";
    // padding-top: 20px;
  }

  .lage-font-mobel {
    width: 100%;
    text-align: left;
    font-family: "BebasFontEnB";
    font-size: 10rem;
    font-weight: 500;
    color: #000;
  }

  .pont-font-mobel {
    position: relative;
    padding-left: 4rem;
    height: 4rem;
    line-height: 4rem;
    display: flex;
    align-items: center;
  }

  .pont-font-mobel::after {
    content: "";
    width: 100%;
    height: 1px;
    background-color: #000;
    position: absolute;
    bottom: -6px;
    left: 0px;
  }

  .pont-font-mobel::before {
    content: "";
    width: 2.3rem;
    height: 2.3rem;
    border-radius: 50%;
    background-color: #ed112c;
    position: absolute;
    left: 5px;
    top: 50%;
    transform: translateY(-50%);
  }

  .lit-fontcn-clien-mobel {
    padding-top: 12.8rem;
    font-size: 2.8rem;
    text-align: left;
    text-align: justify;
    line-height: 4.1rem;
  }
  .brand-list-mobel {
    width: 100%;
    height: auto;
    padding-bottom: 20rem;
  }


.home {
  position: relative;
}

.right-font {
  text-align: left;
}

.imgbrand {
  width: 100%;
  height: auto;
}
</style>
